﻿/*
--GapColor:#000
--White:#F0F1EC
--Red:#E72F24
--Black:#232629
--Blue:#004592
--Yellow:#F9D01E
*/
:root{
    --GapColor:#000;
    --White:#F0F1EC;
    --Red:#E72F24;
    --Black:#232629;
    --Blue:#004592;
    --Yellow:#F9D01E;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin:0;
    padding:0;
}

.container{
    width: 748px;
    height:748px;
    display: grid;
    background-color: var(--GapColor);
    grid-template-columns: 320px 198px 153px 50px;
    grid-template-rows: 414px 130px 155px 22px;
    gap:9px;
}

.item{
    background-color: var(--White);
}

.red{
    background-color: var(--Red);
}

.white1{
    grid-column: span 3;
}

.white2{
    grid-row: span 2;
}

.white3{
    grid-area: 2 / 2/ 4 / 4;
}

.black{
    background-color: var(--Black);
}

.blue{
    background-color:var(--Blue) ;
    border-bottom: 10px solid var(--GapColor);
}

.white4{
    grid-row: span 2;
}

.yellow{
    background-color: var(--Yellow);
}

